<template>
  <div class="article-manager">
    <div class="i-layout-page-header">
      <PageHeader class="product_tabs" title="" hidden-breadcrumb>
        <div slot="content">
          <Tabs v-model="artFrom.type" @on-click="onClickTab">
            <TabPane
              :label="item.name + '(' + item.count + ')'"
              :name="item.type.toString()"
              v-for="(item, index) in headeNum"
              :key="index"
            />
          </Tabs>
        </div>
      </PageHeader>
    </div>

    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form
        ref="artFrom"
        :model="artFrom"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <Row type="flex" :gutter="24">
          <!-- <Col v-bind="grid">
            <FormItem label="所属城市：" label-for="pid">
              <Select v-model="artFrom.city_id"  @on-change="selectCity" placeholder="请选择所属城市">
                  <Option v-for="item in cityList" :value="item.city_id" :key="item.city_id">{{ item.city_name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="所属公司：" label-for="pid">
              <Select v-model="artFrom.company_id"   placeholder="请选择所属公司">
                  <Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.company_name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="线路特性：" label-for="pid">
              <Select v-model="artFrom.trait"   placeholder="请选择线路特性">
                <Option label="所有" :value="0" />
                <Option label="通勤" :value="1" />
                <Option  label="高铁" :value="2" />
                <Option label="高校" :value="3" />
                <Option label="机场" :value="5" />
                <Option label="高品质公交" :value="6" />
                <Option label="红色专线" :value="7" />
                    
              </Select>
            </FormItem>
          </Col> -->
          <Col v-bind="grid">
            <FormItem label="线路搜索：" label-for="line_name">
              <Input
                search
                enter-button
                placeholder="请输入线路名称,关键字,ID"
                v-model="artFrom.line_name"
                @on-search="userSearchs"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="Button">
        <router-link
          v-auth="['line-custom-bus-save']"
          :to="'/admin/line/add_coustom_bus'"
          ><Button type="primary" class="bnt mr15" icon="md-add"
            >添加线路</Button
          ></router-link>
      
        <Tooltip content="导出数据" :disabled="!!tableList.length">
          <Button
            class="export"
            icon="ios-share-outline"
            @click="exports"
            >导出</Button
          >
        </Tooltip>
      </div>
      <Table
        ref="table"
        :columns="columns"
        :data="tableList"
        class="ivu-mt"
        :loading="loading"
        highlight-row
        no-data-text="暂无数据"
        no-filtered-data-text="暂无筛选结果"
      >
 
       
        <template slot-scope="{ row, index }" slot="action">
          <a @click="edit(row)">编辑</a>
          <Divider type="vertical" />
           <a v-if="row.status==1" @click="changeLineStatusClick('remove',row)">下线</a>        
           <a v-else @click="changeLineStatusClick('add',row)">上线</a>
          <Divider type="vertical" />
          <a  style="color:red" @click="changeLineStatusClick('delete',row)">{{row.status!=3?'删除':''}}</a>        
          </template>
      </Table>
      <div class="acea-row row-right page">
        <Page
          :total="total"
          :current="artFrom.page"
          show-elevator
          show-total
          @on-change="pageChange"
          :page-size="artFrom.limit"
        />
      </div>
    </Card>

  </div>
</template>

<script>
import toExcel from "../../../utils/Excel.js";
import { mapState } from "vuex";
import {adminInfoApi} from "@/api/setting"
import util from '@/libs/util';

import {
  getLineHeade,
  getLines,
  changeLineStatusApi,
  exportLineListApi
} from "@/api/line";

import exportExcel from "@/utils/newToExcel.js";

export default {
  name: "custom_busList",
  components: { },
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    ...mapState("admin/userLevel", ["categoryId"]),
    labelWidth() {
      return this.isMobile ? undefined : 75;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    },
  },
  data() {
    return {
      cityList: [],
      companyList:[],
      template: false,
      modals: false,
      grid: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      artFrom: {
        page: 1,
        limit: 25,
        status: "1",
        excel: 0,
        // line_sn: '',
        // city_id: '',
        // company_id: '',
        // trait: 0,
      },
      list: [],
      tableList: [],
      headeNum: [],
      treeSelect: [],
      loading: false,
      columns: [
     
        {
          title: "线路ID",
          key: "line_id",
          width: 200,
        },
        {
          title: "出发城市",
          key: "origin",
          minWidth: 80,
        },
        {
          title: "到达城市",
          key: "destination",
          minWidth: 100,
        },
        {
          title: "首站",
          key: "on_stop_name",
          minWidth: 100,
        },
        {
          title: "末站",
          key: "off_stop_name",
          minWidth: 100,
        },
        {
          title: "途经站点数",
          key: "stop_num",
          minWidth: 50,
        },

        {
          title: "票价(元)",
          key: "discount_price",
          minWidth: 90,
        },
        {
          title: "里程(km)",
          key: "distance_desc",
          minWidth: 80,
        },
        {
          title: "预售天数",
          key: "yu_sale_num",
          minWidth: 70,
        },
           {
          title: "状态",
          key: "status_desc",
          width: 100,
        },
        // {
        //   title: "状态",
        //   slot: "status",
        //   width: 100,
        //   filters: [
        //     {
        //       label: "上架",
        //       value: 1,
        //     },
        //     {
        //       label: "下架",
        //       value: 0,
        //     },
        //   ],
        //   filterMethod(value, row) {
        //     return row.is_show === value;
        //   },
        //   filterMultiple: false,
        // },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          minWidth: 220,
        },
      ],
      data: [],
      total: 0,
      attrTemplate: false,
      ids: [],
      display: "none",
      formSelection: [],
      selectionCopy: [],
      checkBox: false,
      isAll: -1,
      value1: [],
      // activeKey:1
    };
  },
  watch: {
    $route() {
      // if (this.$route.fullPath === "/admin/line/custom_bus_list?status=1") {
      //   this.getPath();
      // }
    },
    formSelection(value) {
      // this.checkBox = value.length === this.tableList.length;
    },
    tableList: {
      deep: true,
      handler(value) {
        value.forEach((item) => {
          this.formSelection.forEach((itm) => {
            if (itm.id === item.id) {
              item.checkBox = true;
            }
          });
        });
        const arr = this.tableList.filter((item) => item.checkBox);
        if (this.tableList.length) {
          this.checkBox = this.tableList.length === arr.length;
        } else {
          this.checkBox = false;
        }
      },
    },
  },
  created() {
  },
  mounted() {
  util.cookies.remove('edit_custom_bus_id')
    // if (this.$route.fullPath === "/admin/line/custom_bus_list?status=1") {
    //   this.getPath();
    // } else {
    //   this.getDataList();
    // }
    
     this.getAdminInfo()
    // this.getDataList();
  },
  methods: {


   // h获取管理员信息
    getAdminInfo(){
      adminInfoApi().then((res) => {
          this.cityList = res.data.admin_roles_info
          if(res.status==200){
             this.goodHeade(); this.getDataList();
          }
        })
        .catch((error) => {
          console.log(error)
          this.$Message.error(error.msg||'错误请求')
        });
    },
      // 选择城市触发
    selectCity(id) {
      var city = {}
      this.cityList.forEach(function(item) {
        if (item.city_id === id) {
          city = item
        }
      })
      var that = this
      if (!city.company_ids) {
        that.$Message.error('该城市下没有公司,请前往维护管理添加公司！')
        return
      }
      that.companyList = city.company_list
    },

 
    // 数据导出；
    async exports() {
      let [th, filekey, data, fileName] = [[], [], [], ""];
      let formValidate = this.artFrom;
      let lebData = await this.getExcelData(formValidate);
  
      if (!fileName) fileName = lebData.filename;
      if (!filekey.length) {
        filekey = lebData.filekey;
      }
      if (!th.length) th = lebData.header;
      if (lebData.export.length) {
        data = data.concat(lebData.export);
      }

      exportExcel(th, filekey, fileName, data);
    },
    getExcelData(excelData) {
      return new Promise((resolve, reject) => {
        exportLineListApi(excelData).then((res) => {
          return resolve(res.data);
        });
      });
    },
    changeTemplate(e) {
      // this.template = e;
    },
    freight() {
      this.$refs.template.isTemplate = true;
    },
   
 
    // tab选择
    onClickTab(name) {
      this.artFrom.status = name;
      // this.columns2 = [...this.columns];
      // if (name !== "1" && name !== "2") {
      //   this.columns2.shift({
      //     type: "selection",
      //     width: 60,
      //     align: "center",
      //   });
      // }
      this.getDataList();
    },
  
    // 获取产品表单头数量
    goodHeade() {
      getLineHeade()
        .then((res) => {
          this.headeNum = res.data.list;
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    // 线路列表；
    getDataList() {
      this.loading = true;
      getLines(this.artFrom)
        .then((res) => {
          let data = res.data;
          this.tableList = data.list.map((item) => {
            if (this.isAll === 1) {
              item.checkBox = true;
            } else {
              item.checkBox = false;
            }
            return item;
          });
          this.total = res.data.count;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
    pageChange(status) {
      this.artFrom.page = status;
      this.getDataList();
      this.$refs.table.clearCurrentRow();
    },
    // 表格搜索
    userSearchs() {
      this.artFrom.page = 1;
      this.formSelection = [];
      this.getDataList();
    },
    
       changeLineStatusClick(type, item) {
      var that = this
     
     this.$Modal.confirm({
        title: '提示',
        content: '<p>您是否要更改线路状态?</p>',
        onOk: () => {
            changeLineStatusApi({ type: type, id: item.id }).then(res => {
                 that.goodHeade()
                 that.getDataList()
                 that.$Message.success('操作成功')
            }).catch(error => {
              console.log(error)
            })
        },
        onCancel: () => {
            this.$Message.info('Clicked cancel');
        }
    });

    },
    // 编辑
    edit(row) {
      this.$router.push({ path: "/admin/line/add_coustom_bus?id=" + row.id });
    },
    // 排序
    sortChanged(e) {
      this.artFrom[e.key] = e.order;
      this.getDataList();
    },
  },
};
</script>
<style scoped lang="stylus">
/deep/.ivu-modal-mask {
  z-index: 999 !important;
}

/deep/.ivu-modal-wrap {
  z-index: 999 !important;
}

.Box {
  >>> .ivu-modal-body {
    height: 700px;
    overflow: auto;
  }
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

/deep/.ivu-table-cell-expand-expanded {
  margin-top: -6px;
  margin-right: 33px;
  transition: none;

  .ivu-icon {
    vertical-align: 2px;
  }
}

/deep/.ivu-table-header {
  // overflow visible
}

/deep/.ivu-table th {
  overflow: visible;
}

/deep/.select-item:hover {
  background-color: #f3f3f3;
}

/deep/.select-on {
  display: block;
}

/deep/.select-item.on {
  background: #f3f3f3;
}
</style>
